import React, { useRef, useEffect } from 'react';
import AMap from 'AMap';
import { provinces } from './province';
import { message } from 'antd';
import 'antd/dist/antd.css';


export default () => {
  const refMap = useRef();
  const infoWindow = useRef();

  const showInfoM = (e: any, name: string, num: number) => {
    message.info(`${name}销售数据为：${num} 个`);
    // console.log(message);

  }

  const initMarker = () => {
    const markers = []; //province见Demo引用的JS文件
    for (let i = 0; i < provinces.length; i += 1) {
      let marker;
        marker = new AMap.Marker({
          position: provinces[i].center.split(','),
          title: provinces[i].name,
          map: refMap.current,

        });
        marker.on('click', (e: any) => { showInfoM(e, provinces[i].name, provinces[i].number) });
      markers.push(marker);
    }
    refMap.current.setFitView();
  }

  useEffect(() => {
    console.log(provinces, 'ppp');

    refMap.current = new AMap.Map('container',{
      zoom: 4.5,
      resizeEnable: false,
      center: [106.397428, 37.90923]
    });
    const toolBar = new AMap.ToolBar({
      visible: true
     });
    refMap.current?.addControl(toolBar);
    initMarker();
  }, [])

  const open = () => {
    console.log(refMap.current);
   // 信息窗体的内容
   const content = [
    "<div> ",
    "</br>",
    "电话 : 010-84107000   邮编 : 100102",
    "地址 : 北京市望京阜通东大街方恒国际中心A座16层</div>"
  ];

  // 创建 infoWindow 实例
  infoWindow.current = new AMap.InfoWindow({
  content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
  });

  // 打开信息窗体
  infoWindow.current.open(refMap.current, refMap.current?.getCenter());
  }
  return <div>
    <div id="container" style={{ width: '100%', height: '1000px' }}>
    </div>
    </div>
};


